<template>
	<div class="margin-top container">
		<Header @changeLanguage="changeLanguage"  />
		<div class="wrap">
		<Title :pageName="title" :showSearch="true" @onSearch="onSearch" :searchText="searchText"/>
		<SubTitle :pageName="sub_title"/>
		<List :list="list"  v-loading="loading" :emptyText="emptyText"/>
		<el-pagination background layout="prev, pager, next,jumper" :total="total" :page-size="pagesize" @current-change="currentChange" @prev-click="prevClick" @next-click="nextClick">
		</el-pagination>
		</div>
		<Footer />
	</div>
</template>

<script>
	import {
		policy,empty,search
	} from "@/lang";
	import Header from "@/components/Header";
	import Title from "@/components/Title";
	import SubTitle from "@/components/SubTitle";
	import List from "@/components/List";
	import Footer from "@/components/Footer";
	import {
		getPolicy
	} from "@/api";
	export default {
		name: "policy",
		components: {
			Header,
			Title,
			SubTitle,
			List,
			Footer,
		},
		data() {
			return {
				title: "",
				langCode: '',
				list: [],
				policy: policy,
				total:0,
				offset:1,
				pagesize:10,
				type:'',
				name:'',
				empty:empty,
				emptyText:'',
				search:search,
				searchText:'',
				sub_title:''
			};
		},
		created() {
			this.type = this.$route.query.type;
			const lang = localStorage.getItem("lang");
			this.langCode = lang === "ZH" ? 0 : 1;
			this.setPageLanguage(lang);
			this.onSend();
		},
		methods: {
			onSend() {
				this.getList();
			},
			async getList() {
				let self = this;
				this.loading = true;
				const res = await getPolicy({
					lang: self.langCode,
					pagesize:self.pagesize,
					offset:self.offset,
					type:self.type,
					name:self.name
				});
				this.list = res.policy
				this.total = res.totalNumber
				this.loading = false
			},
			setPageLanguage(_lang) {
				console.log(this.policy)
				const lang = _lang.toLowerCase();
				this.title = this.policy.title[lang];
				this.emptyText = this.empty[lang]
				this.searchText = this.search[lang]
				this.sub_title = this.policy.sub_title[lang][this.$route.query.type*1-1];
			},
			changeLanguage(lang) {
				this.langCode = lang === "ZH" ? 0 : 1;
				this.setPageLanguage(lang);
				this.onSend();
			},
			prevClick(n){
				this.offset = n;
				this.getList();
			},
			nextClick(n){
				this.offset = n;
				this.getList();
			},
			currentChange(n){
				this.offset = n;
				this.getList();
			},
			onSearch(value){
				this.name = value;
				this.getList();
			}
		},
	};
</script>

<style scoped lang="less">
	.wrap{
		min-height:45vh
	}
	/deep/ .el-pagination{
		width:1200px;
		margin:0 auto;
		margin-top: 15px;
		text-align: right;
	}
	/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{
		background-color: #255389;
	}
</style>
